{% extends "tracking/tracking_base.html" %}
{% block title %}投诉建议{% endblock %}
{% block head %} 
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}">
{% endblock %}
{% block page_content %}

{{ super() }}

<div class="col-md-12">
    <div class="panel-body" style="padding-bottom:0px;">
	<ul id="myTab" class="nav nav-tabs">
            <li class="active">
		<a href="#valid" data-toggle="tab" onclick="setTable('valid')">待处理</a>
   	    </li>
            <li>
		<a href="#finish" data-toggle="tab" onclick="setTable('finish')">已处理</a>
	    </li>
        </ul>
	<div id="myTabContent" class="tab-content">
	    <div class="tab-pane fade in active" id="valid"> 
	    	 <table id="tb_valid"></table>
	    </div>
	    <div class="tab-pane fade" id="finish"> 
	    	 <table id="tb_finish"></table>
	    </div>
	</div>
    </div>
</div>
{% endblock %}
{% block scripts  %}
{{ super() }}
<script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
<script>
$(function () {

    //初始化Table
    var tb_valid = new TableInit("tb_valid");
    tb_valid.Init();
    var tb_finish = new TableInit("tb_finish");
    tb_finish.Init();
});


var TableInit = function (table_id) {
    var oTableInit = new Object();
    var urls = new Array();
    urls['tb_valid'] = "/tracking/advice/get_list/?list_type=valid";
    urls['tb_finish'] = "/tracking/advice/get_list/?list_type=finish";

    //初始化Table
    table = document.getElementById(table_id);
    oTableInit.Init = function () {
        $(table).bootstrapTable({
            url: urls[table_id],                //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            columns: [{
		field: 'number',
		title: 'ID',
		align: 'center',
	    },{
                field: 'type',
                title: '类型',
		align: 'center',
            }, {
                field: 'content',
                title: '内容',
		align: 'center',
            }, {
                field: 'name',
                title: '提交人',
                align: 'center',
            }, {
                field: 'phone',
                title: '联系电话',
		align: 'center',
            }, {
                field: 'time',
                title: table_id==="tb_finish" ? '结束时间' : '提交时间',
		align: 'center',
            }, {
		field: 'area',
		title: '地区',
		align: 'center',
	    }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                formatter: function(value){
			word = table_id === "tb_valid" ? "处理" : "查看";
		        return '<a target="_blank" href="/tracking/advice/details/' + value + '" title="添加跟进信息">' + word + '</a>';
		},
            },]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = { 
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            number: $("#number").val(),
            start: $("#start").val(),
	    end: $("#end").val(),
	    submitter: $("#submitter").val(),
	    area: $("#area").val(),
            search_type: $("#search_type").val(),
	    tb_name: $("#tb_name").val(),
        };
        return temp;
    };
	
    return oTableInit;
};

var selected_table = 'valid';

var setTable = function(table){
	selected_table = table;
}

var search = function(){
	document.getElementById('tb_name').value = selected_table;
	$('#tb_' + selected_table).bootstrapTable('refresh', {'silent': true});
}

</script>
<script>
    nav = document.getElementById("nav_advice");
    nav.setAttribute("class", "active");
</script>
{% endblock %}
